<template>
  <div class="container">
    <el-form ref="form" :model="form" :rules="rule" label-position="right" label-width="150px">
        <div class="title-container">
          <h3>添加分校</h3>
        </div>
       <el-form-item label="分校名称:" prop="school_name">
         <el-input v-model="form.school_name"></el-input>
       </el-form-item>
      <el-form-item label="分校联系方式:" prop="school_phone">
        <el-input v-model="form.school_phone"></el-input>
      </el-form-item>
      <el-form-item label="分校位置:" prop="school_position">
        <el-input v-model="form.school_position"></el-input>
      </el-form-item>
      <el-form-item
        v-for="(two_son, index) in form.subject_two"
        :label="two_son.label"
        :key="two_son.key"
        :prop="'subject_two.' + index + '.value'"
        :rules="{
          required: true, message: '科目二场地不能为空', trigger: 'blur'
        }"
      >
        <el-input v-model="two_son.value"></el-input><el-button style="margin-left:10px;" @click.prevent="removeDom(index,two_son,'two')">删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button class="iconfont iconicon_add" size="small" @click.prevent="addTwo"></el-button>
      </el-form-item>

      <el-form-item
        v-for="(three_son, index) in form.subject_three"
        :label="three_son.label"
        :key="three_son.key"
        :prop="'subject_three.'+ index + '.value'"
        :rules="{
            required: true, message: '科目三场地不能为空', trigger: 'blur'
        }"
      >
        <el-input v-model="three_son.value"></el-input><el-button style="margin-left:10px;" @click.prevent="removeDom(index,three_son,'three')">删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button class="iconfont iconicon_add" size="small" @click.prevent="addThree"></el-button>
      </el-form-item>
      <el-form-item class="tip-container">
        <span><i class="iconfont iconicon_warn_fill">tip:科目二、三练习场地至少有一个!</i></span>
      </el-form-item>
      <div class="button-container">
        <el-button type="primary" :loading="loading" @click.prevent="add">添加</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
  import  {addSchool} from '@/api/school'
    export default {
        name: "add",
        inject: ['reload'],
        data () {
            const isPhone = (rule, value, callBack) => {
                //手机正则
                var mobilePtn = /^1[34578][0-9]{9}$/;
                //座机正则
                var landlinePtn = /^(0[0-9]{2,3}\-)([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;

                if ( !mobilePtn.test(value) && !landlinePtn.test(value)) {
                    callBack(new Error('手机号码或者座机号码格式不正确'));
                } else {
                    callBack();
                }
            }
            return {
                form: {
                    subject_two: [
                        {label: '科目二练习场地:' ,value: ''},
                    ],
                    subject_three: [
                        {label: '科目三练习场地:', value: ''}
                    ],
                    school_name: '',
                    school_position: '',
                    school_phone: ''
                },
                loading: false,
                rule : {
                    school_name: [
                        {required: true, message: '分校名称为必填项',trigger: 'blur'},
                    ],
                    school_position: [
                        {required: true, message: '分校位置为必填项',trigger: 'blur'}
                    ],
                    school_phone: [
                        {required: true, message: '联系方式为必填项', trigger: 'blur'},
                        {validator: isPhone, trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            removeDom(index, data, subject) {
               var index = 0;
               if (subject == 'two') {
                  index = this.form.subject_two.indexOf(data);
               } else {
                   index = this.form.subject_three.indexOf(data);
               }

               if (index !== -1) {
                   if (subject == 'two') {
                       this.form.subject_two.splice(index,1);
                   } else {
                       this.form.subject_three.splice(index,1);
                   }
               }

            },

            addTwo() {
                let node = {};
                if (this.form.subject_two.length == 0) {
                     node = {label: '科目二练习场地:', value: '',key: Date.now()};
                } else {
                     node = {label: '', value: '',key: Date.now()};
                }

                this.form.subject_two.push(node);
            },

            addThree() {
                let node = {};
                if (this.form.subject_three.length == 0) {
                     node = {label: '科目三练习场地:', value: '',key: Date.now()};
                } else {
                     node = {label: '', value: '',key: Date.now()};
                }
                this.form.subject_three.push(node);
            },
            translateFunction(objArray) {
                var subject = [];
                subject.push(objArray.map( item  => item.value));
                subject = subject.join(',');
                return subject;
            },
            add() {
                this.$refs.form.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    //这里还需要校验是否删除了所有的练车场地信息
                    if (this.form.subject_two.length == 0 || this.form.subject_three.length == 0) {
                        return this.$notify.warning('最少需要输入一个科目二、三的练车场地信息');
                    }

                    this.loading = true;
                    //所有的验证都通过 则进行数据拼接 发送
                    //组装科目二练车场地信息
                    let subject_two = this.translateFunction(this.form.subject_two);
                    //组装科目三练车场地信息
                    let subject_three = this.translateFunction(this.form.subject_three);

                    let data = {
                        school_name: this.form.school_name,
                        school_address: this.form.school_position,
                        subject_two_place: subject_two,
                        subject_three_place: subject_three,
                        school_phone: this.form.school_phone
                    };
                    addSchool(data).then(response => {
                        this.loading = false;
                        this.$message.success(response.msg);
                        this.$router.push({path: '/school/list'});
                    }).catch(() => {
                        this.loading = false;
                    })
                });
            }

        }
    }
</script>

<style lang="scss" scoped>
    .container{
      min-width: 100%;
      width: 100%;
      overflow: hidden;

      .title-container{
        width:100%;
        max-width: 100%;
        h3 {
          text-align: center;
          height:30px;
          line-height: 30px;
          font-size: 20px;
        }
      }
      .el-form {
        border: 1px solid #F2F6FC;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        width:700px;
        max-width: 100%;
        position: relative;
        margin: 10px auto;
        .el-input {
          width:50%;
        }
        .el-form-item {

        }

        .button-container {
          width: 30%;
          max-width: 50%;
          margin: 10px auto;
          .el-button {
            width: 100%;
          }
        }

        .tip-container{
          color: red;
        }
      }
    }
</style>
